<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">请填写病区</span>
            <el-input v-model="formInfo.Wardcode" type="text" placeholder="请填写病区" />
          </div>
          <div class="fl">
            <span class="c_tip">患者姓名</span>
            <el-input v-model="formInfo.Patient_name" type="text" placeholder="请输入患者姓名" />
          </div>
          <div class="fl">
            <span class="c_tip">患者号</span>
            <el-input v-model="formInfo.Patient_id" type="text" placeholder="请输入患者号" />
          </div>
        </div>
        <div class="fl">
          <span class="c_tip">入院时间</span>
          <el-date-picker
            v-model="formInfo.Startdate"
            type="date"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
          />
          <span>至</span>
          <el-date-picker
            v-model="formInfo.Enddate"
            type="date"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
          />
        </div>
        <div class="fl">
          <span class="c_tip" />
          <el-button type="primary" class="btn_clear" @click="getPatientAllInfoList">查询</el-button>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="table_box">
      <Bluetable
        ref="blueTable"
        :t-head="tHead"
        :t-data="patientAllInfoList.patientInfo"
        :child-open="childOpen"
        @operateClick="operateClick"
      />
      <pagination
        :total="queryPatientAllInfoPage.total"
        :page.sync="queryPatientAllInfoPage.pagenum"
        :limit.sync="queryPatientAllInfoPage.pagesize"
        @pagination="getList"
      />
      <el-dialog
        :title="title"
        :visible.sync="childOpen"
        width="1150px"
        @close="dialogClose"
      >
        <div class="wrapper">
          <div class="content-left">
            <div class="btns"><el-button :type="type1" @click="changeBtn('1')">概览</el-button></div>
            <div class="btns"><el-button :type="type2" @click="changeBtn('2')">门诊</el-button></div>
            <div class="btns"><el-button :type="type3" @click="changeBtn('3')">住院</el-button></div>
          </div>
          <div class="content-right">
            <div class="right-top">
              <card>
                <div slot="cardHeader">病人基本信息</div>
                <div slot="cardBody" class="cardBody">
                  <div class="body-left">{{ patientInfoDetail.PatientInfo.PatientName }}</div>
                  <div class="body-right">
                    <div class="body-right-top">
                      <div class="gender">{{ patientInfoDetail.PatientInfo.Sex }}</div>
                      <div class="age">{{ patientInfoDetail.PatientInfo.Age }}岁</div>
                    </div>
                    <div class="body-right-bottom">
                      <div class="item">
                        <div class="item-key">电话:</div>
                        <div class="item-value">{{ patientInfoDetail.PatientInfo.TelePhone }}</div>
                      </div>
                      <div class="item">
                        <div class="item-key">生日:</div>
                        <div class="item-value">{{ patientInfoDetail.PatientInfo.BirthDate }}</div>
                      </div>
                      <div class="item">
                        <div class="item-key">出生地:</div>
                        <div class="item-value">江苏</div>
                      </div>
                      <div class="item">
                        <div class="item-key">民族:</div>
                        <div class="item-value">汉</div>
                      </div>
                    </div>
                  </div>
                </div>
              </card>
            </div>

            <div class="right-bottom">
              <div v-if="btnvalue === '1'">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                  <el-tab-pane name="first" label="病史">
                    <div class="medical-history">
                      <div class="irritability">
                        <div class="history-name"><span>过敏史</span></div>
                        <div class="histort-message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, nulla!</div>
                      </div>
                      <div class="family">
                        <div class="history-name"><span>家族史</span></div>
                        <div class="histort-message">Lorem ipsum dolor sit amet,
                          pisicing elit. Alias deserunt dolores eaque earum li
                          bero maxime quaerat s撒旦阿斯顿阿斯达reiciendis tenetur ullam veniam?</div>
                      </div>
                      <div class="previous">
                        <div class="history-name"><span>既往史</span></div>
                        <div class="histort-message">暂缺</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane name="second" label="就诊记录">
                    <div class="record">
                      <div class="record-time">
                        <span class="record-name">选择年份</span>
                        <el-date-picker
                          v-model="Year"
                          type="year"
                          placeholder="请选择年份"
                          value-format="yyyy"
                          @change="yearChange('patientVisitdic')"
                        /></div>
                      <div class="record-table">
                        <el-scrollbar style="width:930px;height:350px">
                          <Bluetable :t-head="patientVisitdicHead" :t-data="patientVisitdicList" />
                        </el-scrollbar>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane name="third" label="手术记录">
                    <div class="record">
                      <div class="record-time">
                        <span class="record-name">选择年份</span>
                        <el-date-picker
                          v-model="Year"
                          type="year"
                          placeholder="请选择年份"
                          value-format="yyyy"
                          @change="yearChange('operNameInfo')"
                        /></div>
                      <div class="record-table">
                        <el-scrollbar style="width:930px;height:350px">
                          <Bluetable :t-head="patientOperdicHead" :t-data="operNameInfoList" />
                        </el-scrollbar></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane name="fourth" label="用药记录">
                    <div class="record">
                      <div class="record-time">
                        <span class="record-name">选择年份</span>
                        <el-date-picker
                          v-model="Year"
                          type="year"
                          placeholder="请选择年份"
                          value-format="yyyy"
                          @change="yearChange('patientDrugdic')"
                        /></div>
                      <div class="record-table">
                        <el-scrollbar style="width:930px;height:350px">
                          <Bluetable :t-head="patientDrugdicHead" :t-data="patientDrugdicList" />
                        </el-scrollbar>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div v-else-if="btnvalue === '2'">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                  <el-tab-pane name="first" label="长期处方">
                    <Bluetable :t-head="tRecord" :t-data="tRecordData" />
                  </el-tab-pane>
                  <el-tab-pane name="second" label="门诊检验">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="PatientLabInfoDataHead" :t-data="patientInfoDetail.OutpPatientLabInfoData" />
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane name="third" label="门诊检查">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="PatientExamInfoData" :t-data="patientInfoDetail.OutpPatientExamInfoData" />
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane name="fourth" label="病历文件">
                    <span class="record-name">病历文件</span>
                    <el-select v-model="value" clearable placeholder="请选择病历文件">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div v-else-if="btnvalue === '3'">
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                  <el-tab-pane name="first" label="住院临时医嘱">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="inptempdataHead" :t-data="patientInfoDetail.Inptempdata" />
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane name="second" label="住院长期医嘱">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="InpLongdata" :t-data="patientInfoDetail.InpLongdata" />
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane name="third" label="住院检验信息">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="PatientLabInfoDataHead" :t-data="patientInfoDetail.InpPatientLabInfoData" />
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane name="fourth" label="住院检查信息">
                    <el-scrollbar style="width:930px;height:350px">
                      <Bluetable :t-head="PatientExamInfoData" :t-data="patientInfoDetail.InpPatientExamInfoData" />
                    </el-scrollbar>
                  </el-tab-pane>
                </el-tabs>
              </div>

            </div>
          </div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import Card from '../../prc/childComps/card/Card'
import { GetPatientAllInfoList, PatientAllInfoDetail } from '@/api/cpw'
export default {
  components: {
    Card
  },
  data() {
    return {
      // 获取全部病人列表
      patientAllInfoList: {
        patientInfo: [],
        // 	总页数
        total: 0,
        // 	当前页
        page: 0,
        // 总记录数
        records: 0
      },
      // 查询信息
      formInfo: {
        // 开始时间
        Startdate: '',
        // 结束时间
        Enddate: '',
        // 病区
        Wardcode: '',
        // 患者姓名
        Patient_name: '',
        // 患者号
        Patient_id: ''
      },
      // 查询病人列表分页参数
      queryPatientAllInfoPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      // 是否显示
      childOpen: false,
      // 标题
      title: '病人姓名 ',
      // 激活标签
      activeName: 'first',
      // 病人详细信息
      patientInfoDetail: {
        PatientInfo: {},
        Inptempdata: {},
        InpLongdata: {},
        PatientVisitdic: {},
        PatientOperdic: {},
        PatientDrugdic: {},
        OutpPatientLabInfoData: {},
        OutpPatientExamInfoData: {},
        InpPatientLabInfoData: {},
        InpPatientExamInfoData: {}
      },
      tRecordData: [],
      // 就诊记录、用药记录、手术年份
      Year: '',
      // 就诊记录对应年份数据
      patientVisitdicList: [],
      // 用药记录对应年份数据
      patientDrugdicList: [],
      // 手术记录对应数据
      operNameInfoList: [],
      // 病人信息列表
      tHead: [
        {
          operate: ['查看病人信息'],
          label: '操作'
        },
        {
          prop: 'patient_name',
          label: '患者姓名'
        },
        {
          prop: 'sex',
          label: '性别',
          width: '100px'
        },
        {
          prop: 'startdate',
          label: '入院时间'
        },
        {
          prop: 'wardcode',
          label: '病区',
          width: '150px'
        },
        {
          prop: 'disname',
          label: '诊断',
          width: '400px'
        }],
      // 就诊记录表头
      patientVisitdicHead: [
        {
          prop: 'JiuzhenTime',
          label: '就诊时间'
        },
        {
          prop: 'DoctorNameInfo',
          label: '医生姓名'
        },
        {
          prop: 'DeptNameInfo',
          label: '科室姓名'
        }
      ],
      // 手术记录表头
      patientOperdicHead: [
        {
          prop: 'JiuzhenTime',
          label: '就诊时间'
        },
        {
          prop: 'DoctorNameInfo',
          label: '医生姓名'
        },
        {
          prop: 'OperNameInfo',
          label: '手术名称'
        }
      ],
      // 门诊检验表头
      PatientLabInfoDataHead: [
        {
          prop: 'patientid',
          label: '病人ID'
        },
        {
          prop: 'labcode',
          label: '检验项目编码'
        },
        {
          prop: 'labname',
          label: '检验项目描述'
        },
        {
          prop: 'requestno',
          label: '申请单号'
        },
        {
          prop: 'sampletype',
          label: '样本类型'
        },
        {
          prop: 'samplingtime',
          label: '采样时间'
        },
        {
          prop: 'labresult',
          label: '检验结果'
        },
        {
          prop: 'reporttime',
          label: '报告时间'
        },
        {
          prop: 'doctorname',
          label: '申请医生姓名'
        }
      ],
      // 门诊检查表头
      PatientExamInfoData: [
        {
          prop: 'patientid',
          label: '病人ID'
        },
        {
          prop: 'examcode',
          label: '检查项目编码'
        },
        {
          prop: 'examname',
          label: '检查项目描述'
        },
        {
          prop: 'requestno',
          label: '申请单号'
        },
        {
          prop: 'bodypart',
          label: '检查部位'
        },
        {
          prop: 'examresult',
          label: '检查结果'
        },
        {
          prop: 'reporttime',
          label: '检查时间'
        },
        {
          prop: 'doctorname',
          label: '申请医生姓名'
        }
      ],
      // 用药记录表头
      patientDrugdicHead: [
        {
          prop: 'JiuzhenTime',
          label: '就诊时间'
        },
        {
          prop: 'OrderNameInfo',
          label: '科室姓名'
        },
        {
          prop: 'DoctorNameInfo',
          label: '医生姓名'
        }
      ],
      // 临时医嘱表头
      inptempdataHead: [
        {
          prop: 'GroupTagColor',
          label: '组'
        }, {
          prop: 'Ordercategory',
          label: '医嘱类型'
        }, {
          prop: 'OrderName',
          label: '医嘱名称'
        }, {
          prop: 'DrugForm',
          label: '剂型'
        }, {
          prop: 'DrugSpec',
          label: '规格'
        }, {
          prop: 'RouteCode',
          label: '给药途径'
        }, {
          prop: 'SingleDose',
          label: '量/次'
        }, {
          prop: 'DoseUnit',
          label: '给药单位'
        }, {
          prop: 'Freq',
          label: '次/日'
        }, {
          prop: 'Cost',
          label: '费用'
        }, {
          prop: 'DoctorName',
          label: '开嘱医生'
        }, {
          prop: 'StartDateTime',
          label: '开嘱时间'
        }, {
          prop: 'PurPose',
          label: '用药目的'
        }, {
          prop: '',
          label: '调配药师'
        }, {
          prop: '',
          label: '发药药师'
        }, {
          prop: '',
          label: '补充用法'
        }
      ],
      // 长期医嘱表头
      InpLongdata: [
        {
          prop: 'GroupTagColor',
          label: '组'
        }, {
          prop: 'Ordercategory',
          label: '医嘱类型'
        }, {
          prop: 'OrderName',
          label: '医嘱名称'
        }, {
          prop: 'DrugForm',
          label: '剂型'
        }, {
          prop: 'DrugSpec',
          label: '规格'
        }, {
          prop: 'RouteCode',
          label: '给药途径'
        }, {
          prop: 'SingleDose',
          label: '量/次'
        }, {
          prop: 'DoseUnit',
          label: '给药单位'
        }, {
          prop: 'Freq',
          label: '次/日'
        }, {
          prop: 'Cost',
          label: '费用'
        }, {
          prop: 'DoctorName',
          label: '开嘱医生'
        }, {
          prop: 'StartDateTime',
          label: '开嘱时间'
        }, {
          prop: 'PurPose',
          label: '用药目的'
        }, {
          prop: '',
          label: '调配药师'
        }, {
          prop: '',
          label: '发药药师'
        }, {
          prop: '',
          label: '补充用法'
        }
      ],
      btnvalue: '1',
      type1: 'primary',
      type2: 'info',
      type3: 'info',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    // api
    // 获取全部病人列表
    async getPatientAllInfoList() {
      var tempObj = JSON.parse(JSON.stringify(this.formInfo))
      for (var key in tempObj) {
        if (tempObj[key] === '') {
          delete tempObj[key]
        }
      }
      console.log(tempObj)
      await GetPatientAllInfoList({
        json: tempObj,
        pagenum: this.queryPatientAllInfoPage.pagenum,
        pagesize: this.queryPatientAllInfoPage.pagesize
      }).then(res => {
        this.patientAllInfoList.patientInfo = res.rows
        this.patientAllInfoList.total = res.total
        this.patientAllInfoList.page = res.page
        this.patientAllInfoList.records = res.records
        this.queryPatientAllInfoPage.total = res.records
      })
    },
    // 查看病人全部详细信息
    async patientAllInfoDetail(idCard) {
      await PatientAllInfoDetail({
        idcard: idCard
      }).then(res => {
        console.log(res)
        this.patientInfoDetail = res
        this.title = this.title + '【' + res.PatientInfo.PatientName + '】'
      })
    },
    // 病人列表分页数据改变
    async getList(type) {
      this.queryPatientAllInfoPage.pagenum = type.page
      this.queryPatientAllInfoPage.pagesize = type.limit
      await this.getPatientAllInfoList()
    },
    operateClick(val, row) {
      this.childOpen = true
      console.log(row)
      this.patientAllInfoDetail(row.idcard)
    },
    // 按钮切换
    changeBtn(btnvalue) {
      this.btnvalue = btnvalue
      this.activeName = 'first'
      btnvalue === '1' ? this.type1 = 'primary' : this.type1 = 'info'
      btnvalue === '2' ? this.type2 = 'primary' : this.type2 = 'info'
      btnvalue === '3' ? this.type3 = 'primary' : this.type3 = 'info'
    },
    // 标签页改变
    handleClick() {
      this.Year = ''
    },
    // 年份改变
    yearChange(type) {
      if (type === 'patientVisitdic') {
        this.patientVisitdicList = this.patientInfoDetail.PatientVisitdic[this.Year]
      } else if (type === 'patientDrugdic') {
        this.patientDrugdicList = this.patientInfoDetail.PatientDrugdic['用药' + this.Year]
      } else if (type === 'operNameInfo') {
        this.operNameInfoList = this.patientInfoDetail.PatientOperdic['手术' + this.Year]
      }
    },
    // 对话框关闭
    dialogClose() {
      this.childOpen = false
      this.title = '病人姓名'
      this.Year = ''
      this.activeName = 'first'
      this.patientVisitdicList = []
      this.patientDrugdicList = []
      this.patientInfoDetail = {
        PatientInfo: {},
        Inptempdata: {},
        InpLongdata: {},
        PatientVisitdic: {},
        PatientOperdic: {},
        PatientDrugdic: {}
      }
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    font-size: 12px;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      display:flex;
      line-height:60px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        .c_tip{
          display:inline-block;
          width:100px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:150px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }

        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:100px;
        }
        .c_searchbtn{
          display:inline-block;
          width:42px;
          height:25px;
          margin-left:4px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:70px;
          height:40px;
          line-height:40px;
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-dialog__body{
    padding: 0;
  }
  /deep/.el-dialog__header{
    margin-bottom: 0;
  }
  /deep/.el-button--primary{
    width: 100%;
  }
  /deep/.el-button--info{
    width: 100%;
  }
  /deep/.el-tabs__content{
    height: 350px;
  }
  /deep/.el-dialog{
    width: 1150px;
    height: 630px;
  }
  /*/deep/.el-dialog .el-dialog__body{*/
  /*  flex:1;*/
  /*  overflow: auto;*/
  /*}*/

  .wrapper{
    background-color: #e6edf5;
    height: 576px;

    display: flex;
    .content-left{
      width: 145px;
      padding: 5px 5px;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: start;
      justify-content: center;
      .btns{
        width: 100%;
        margin: 5px;

      }
    }
    .content-right{
      .right-top{
        width: 985px;
        padding: 20px;
        .cardBody{
          display: flex;
          .body-left{
            font-size: 24px;
            padding-right: 20px;
            border-right: 1px solid #f1f1f1;
          }
          .body-right{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: 20px;
            .body-right-top{
              width: 100%;
              display: flex;
              font-size: 16px;
              .age{
                margin-left: 10px;
              }

            }
            .body-right-bottom{
              width: 100%;
              display: flex;
              margin-top: 5px;
              .item{
                display: flex;
                margin-right: 20px;
                .item-key{
                  color: #909399;
                }
                .item-value{
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
      .right-bottom{
        padding: 0 20px;
        width: 985px;
        .medical-history{
          .history-name{
            span{
              background-color: #409eff;
              font-size: 14px;
              padding: 2px 10px;
              color: #ffffff;
              width: 65px;
              height: 20px;
              border-radius: 2px;
            }
            padding-bottom: 5px;
          }
          .histort-message{
            margin-left: 10px;
            padding-bottom: 5px;
            line-height: 25px;

          }
        }
        .record{
          font-size: 12px ;
          .record-table{
            margin-top: 20px;
          }
        }

      }
    }
  }
</style>
